<template>
  <div>
      <van-nav-bar @click-left="handleBack" style="position:sticky;top:0;z-index:2;">
      <template #left>
        <van-icon name="arrow-left" color="#8A8B8C" size="24" style="position:sticky;top:0;z-index:2;" />
      </template>
      <template #title>
        密码支付
      </template>
    </van-nav-bar>
    <div style="text-align:center;background:#fff;font-size:48px;">
      ￥{{ pay }}
    </div>
    <!-- 密码输入框 -->
    <van-password-input
      :value="value"
      :length="6"
      :focused="showKeyboard"
      @focus="showKeyboard = true"
      style="position:relative;top:80px;"
    />
    <!-- 数字键盘 -->
    <van-number-keyboard
      v-model="value"
      :show="showKeyboard"
      @blur="showKeyboard = false"
    />
  </div>
</template>

<script>
import { Toast } from 'vant'

export default {
  components: {
  },
  data () {
    return {
      value: '',
      showKeyboard: true,
      pay: ''
    }
  },
  watch: {
    value (value) {
      if (value.length === 6 && value !== '888888') {
        Toast('密码错误')
        this.value = ''
      } else if (value.length === 6 && value === '888888') {
        Toast('支付成功')
        this.value = ''
        this.$router.push('/center')
      }
    }
  },
  computed: {
  },
  created () {
  },
  mounted () {
    this.pay = JSON.parse(localStorage.getItem('pay'))
    console.log(this.pay)
  },
  methods: {
    handleBack () {
      this.$router.back()
    }
  }
}
</script>

<style scoped lang="scss">

</style>
